<script setup lang="ts">
import { ref } from 'vue';
import { useMenuStore } from '@/stores/menu'

const asideShow = ref(true);
const menuCollapse = ref(false);

const menuStore = useMenuStore();

/**
 * 侧边菜单栏 显示/隐藏
 */
const switchAside = () => {
    const width = asideShow.value ? '64px' : '260px'
    document.documentElement.style.setProperty('--ha-aside-width', width);
    asideShow.value = !asideShow.value;
    menuCollapse.value = !menuCollapse.value;
}

/**
 * 侧边菜单项 点击
 * @param routerPath {string} 路由
 * @param title {string} 菜单标题
 */
const menuItemClick = (routerPath: string) => {
    menuStore.addTab(routerPath);
}
</script>

<template>
    <!-- 菜单栏 -->
    <div class="layout-logo">
        <template v-if="asideShow">
            <img src="@/assets/logo.svg" class="img" />
            <span class="site-name">HCMSAdmin</span>
        </template>
        <el-icon :size="20" @click="switchAside" :class="{ 'aside-icon-right': !asideShow }">
            <Fold />
        </el-icon>
    </div>
    <el-scrollbar class="aside-menus-scrollbar">
        <el-menu router :collapse="menuCollapse" v-for="item in menuStore.asideMenus"
            :default-active="menuStore.menuDefaultActive">

            <!-- 有子级菜单 -->
            <template v-if="item.children && item.children.length > 0">
                <el-sub-menu :index="(item.id ?? '0') + (item.routerPath ?? '')">
                    <template #title>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>
                    <el-menu-item v-for="children in item.children" :index="children.routerPath"
                        @click="menuItemClick(children.routerPath ?? '')">
                        {{ children.title }}
                    </el-menu-item>
                </el-sub-menu>
            </template>
            <!-- 没有子级菜单 -->
            <template v-else>
                <el-menu-item :index="item.routerPath" @click="menuItemClick(item.routerPath ?? '')">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span v-show="asideShow">
                        {{ item.title }}
                    </span>
                </el-menu-item>
            </template>
        </el-menu>
    </el-scrollbar>
</template>

<style lang="scss" scoped>
.layout-logo {
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    justify-content: center;
    padding: 10px;

    .img {
        width: 28px;
    }

    .site-name {
        display: block;
        width: 180px;
        margin-left: 4px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.aside-icon-right {
    transform: rotate(180deg);
}

.aside-menus-scrollbar {
    height: calc(100vh - 82px);
    background-color: var(--ha-content-bg-color);
}
</style>